<template>
  <div class="register">
        <v-form
            ref="form"
            v-model="valid"
            lazy-validation
        >

          <v-row>
            <v-col
                class="mt-md-2">

              <v-img
                  src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
              ></v-img>
            </v-col>
            <v-col
                class="mt-lg-8"
                >
              <v-card >
                <v-card-title class="justify-center">电话注册</v-card-title>
                <v-text-field
                    v-model="name"
                    :counter="6"
                    :rules="nameRules"
                    label="用户名"
                    required
                    class="px-12"
                    prepend-icon="mdi-account"
                ></v-text-field>
                <v-text-field
                    v-model="password"
                    :rules="passwordRules"
                    label="密码"
                    required
                    class="px-12"
                    prepend-icon="mdi-lock"
                ></v-text-field>
                <v-text-field
                    v-model="phone"
                    :rules="phoneRules"
                    label="电话"
                    required
                    class="px-12"
                    prepend-icon="mdi-phone"
                ></v-text-field>


                <div class="py-5 text-center">
                  <v-btn
                      :disabled="!valid"
                      color="success"
                      class="mr-4"
                      @click="validate"
                  >
                    注册
                  </v-btn>
                  <v-btn
                      color="success"
                      class="mr-4"
                      @click="validate"
                      to="/login"
                  >
                    登录
                  </v-btn>
                  <v-btn
                      color="error"
                      class="mr-4"
                      @click="reset"
                  >
                    重新填写
                  </v-btn>
                </div>
              </v-card>
            </v-col>

          </v-row>

        </v-form>
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  name:"Register",
  data: () => ({
    valid: true,
    name: '',
    nameRules: [
      v => !!v || '姓名不能为空',
      v => (v && v.length >= 6) || '姓名必须大于6个字符',
    ],
    phone:'',
    phoneRules:[
      v => !!v || '电话不能为空',
      v => (v && v.length === 11) || '手机号必须11位',
    ],
    password:'',
    passwordRules:[
      v => !!v || '电话不能为空',
      v => (v && v.length >= 6) || '含字母数字不小于6位',
    ],



    checkbox: false,
  }),

  methods: {
    validate () {
      this.$refs.form.validate()
    },
    reset () {
      this.$refs.form.reset()
    },
  },
}
</script>

<style scoped>

</style>
